
<style scoped lang="less">
  .help-detail {
    .header {
      padding: 10px 15px 0 15px;
      background: white;
      .personal-info {
        padding: 10px 0 10px 0;
        img {
          border-radius: 20px;
        }
        .nick {
          font-size: 14px;
          color: #333333;
          letter-spacing: 0;
        }
        .star {
          font-size: 11px;
          color: #999999;
          letter-spacing: 0;
        }
        .date {
          font-size: 11px;
          color: #999999;
          letter-spacing: 0;
          span {
            line-height: 44px;
          }
        }
      }
      .info {
        padding-bottom: 10px;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0;
        text-align: justify;
      }
    }
    .detail {
      margin-top: 5px;
      background-color: white;
      .summary {
        padding: 0 15px 10px 15px;
        text-align: left;
        .title {
          color: #999999;
        }
      }
    }
  }
</style>

<template>
  <div class="help-detail">
    <div class="header">
      <div class="personal-info flex flex-pack-justify">
        <div style="display:flex" class="name">
          <div><span><img width="40px" height="40px" src='http://pic5.58cdn.com.cn/zhuanzh/n_v1bkuyfvltjuifpjbky4aq.jpg'/></span></div>
          <div style="text-align:left;margin-left:5px;">
            <span class="nick">{{helpDetail.nickName}}</span><br>
            <span class="star">{{helpDetail.constellation}} {{helpDetail.grade}}</span>
          </div>
        </div>
        <div class="date">
          <span>{{helpDetail.publishingTime}}</span>
        </div>
      </div>
      <div class="info">
        <span>{{helpDetail.description}}</span>
      </div>
    </div>
    <div class="detail">
      <div class="summary">
        <div><span class="title">求助等级：</span>{{helpDetail.level}}</div>
        <div><span class="title">联系人：</span>{{helpDetail.contactName}}</div>
        <div><span class="title">联系电话：</span>{{helpDetail.mobile}}</div>
      </div>
    </div>
     <image_video_list :imageList="imgList" :videoList="videoList"></image_video_list>
     <comment_list :commentList="helpDetail.commentList"></comment_list>
  </div>
</template>

<script>
  import util from '@/libs/util'
  import comment_list from '../../components/comment_list.vue'
  import image_video_list from '../../components/image_video_list.vue'
  export default {
    name: 'help-detail',
    components: {
      comment_list,
      image_video_list
    },
    data() {
      return {
        msg: '',
        id: 0,
        　helpDetail: {},
          imgList: [], 
          videoList:[],
      }
    },
    mounted() {
      this.id = this.$route.query.id;
      this.$http.get('api/share/getEvent?id='+this.id).then((res) => {
      //this.$http.get('static/event.json').then((res) => {
        let data = res.data;
        if (data.statusCode == '600') {
          this.helpDetail = data.content;
          this.helpDetail.publishingTime = util.fmtDate(this.helpDetail.publishingTime);

            if (this.helpDetail.image) {
            this.imgList = this.helpDetail.image.split(';');
          }
          if (this.helpDetail.video) {
            this.videoList = this.helpDetail.video.split(';')
          }
        }
      })
  
    }
  }
</script>

